<template>
  <div class="width-style">
    <div>
      <el-row :gutter="20" class="page-top">
        <el-col :span="9">
          <div class="ncc-title">
            <el-row :gutter="10">
              <el-col :span="8">
                <img alt='' src="@/assets/images/earth.jpg" class="new-champions-control-img" />
              </el-col>
              <el-col :span="14">
                <div class="ncc-link">
                  <el-link style="font-size: 19px" href="https://kjc.lvu.edu.cn/b4/5d/c457a46173/page.htm" target="_blank">呼吸道疾病是什么？</el-link>
                </div>
                <div class="ncc-link">
                  <el-link style="font-size: 19px" href="https://jingyan.baidu.com/article/63acb44a90120020fcc17ef4.html" target="_blank">慢性呼吸道疾病有哪些？</el-link>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="ncc-title" style="padding-top: 30px">
            <el-row :gutter="10">
              <el-col :span="8">
                <img src="@/assets/images/teacher.jpg" class="new-champions-control-img" />
              </el-col>
              <el-col :span="14">
                <div class="ncc-link">
                  <el-link style="font-size: 19px" href="https://baike.baidu.com/item/%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E8%82%BA%E7%82%8E/24282529?fromtitle=%E6%96%B0%E5%86%A0%E8%82%BA%E7%82%8E&fromid=55661602&fr=aladdin" target="_blank">慢性呼吸系统疾病在秋冬季节高发，原因其实很简单！</el-link>
                </div>
                <div class="ncc-link">
                  <el-link style="font-size: 19px" href="http://ask.39.net/question/66039279.html" target="_blank">聊一聊常见的慢性呼吸道疾病？</el-link>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="9">
          <div style="text-align: center;font-size:20px;width: 100%;height: 25px;color: #404040"><span>世界卫生日 | 关注慢性呼吸道疾病</span></div>
          <img src="@/assets/images/chronicRespiratoryDisease.jpg" class="chronic-respiratory-disease-img" />
        </el-col>
        <el-col :span="6">
          <img alt='' src="@/assets/images/read.jpg" style="width: 100px;height: 100px" />
          <div class="ncc-link-right">
            <el-link style="font-size: 19px" href="https://kjc.lvu.edu.cn/b4/5d/c457a46173/page.htm" target="_blank">我国慢阻肺患者约1亿！</el-link>
          </div>
          <div class="ncc-link-right">
            <el-link style="font-size: 19px" href="https://jingyan.baidu.com/article/63acb44a90120020fcc17ef4.html" target="_blank">慢性阻塞性肺病是全球第三大死亡原因</el-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="font-size:32px;border-bottom: 1px dashed #aaaaaa;color: #333333;margin-top: 13px">
      慢性呼吸道疾病专栏
    </div>
    <div style="text-align: left;font-size: 16px;color: #2c2c2c;margin-bottom: 20px;">
      呼吸系统疾病是一种常见病、多发病，主要病变在气管、支气管、肺部及胸腔，病变轻者多咳嗽、胸痛、呼吸受影响，重者呼吸困难、缺氧，甚至呼吸衰竭而致死。在城市的死亡率占第3位，而在农村则占首位。更应重视的是由于大气污染、吸烟、人口老龄化及其他因素，使国内外的慢性阻塞性肺病（简称慢阻肺，包括慢性支气管炎、肺气肿、肺心病）、支气管哮喘、肺癌、肺部弥散性间质纤维化，以及肺部感染等疾病的发病率、死亡率有增无减。
    </div>
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="18">-->
<!--        <div class="grid-content">-->
<!--          <InnerModuleLong innerModuleName="慢阻肺" :list="copdList"  :picSrc="require('@/assets/images/chronicCopd.jpg')" routeName="/chronicDisease/chronicRespiratoryDisease/copd"/>-->
<!--          <InnerModuleLong innerModuleName="慢性支气管扩张症" :list="expansionList"  :picSrc="require('@/assets/images/chronicBronchiectasis.jpg')" routeName="/chronicDisease/chronicRespiratoryDisease/chronicBronchiectasis"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="6">-->
<!--        <div class="grid-content">-->
<!--          <ModuleAdviser :doctorList="doctorList"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content">
          <div class="acticle-show-box">
            <span class="article-show">文章展示</span>
          </div>
          <ArticleShow :articleList="articleList" :total="total" catalogue="30"/>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <ModuleAdviser :doctorList="doctorList"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ModuleAdviser from "@/components/moduleAdviser.vue";
import InnerModule from "@/components/innerModule.vue";
import {renderTime} from '@/utils/tools.js'

export default {
  layout: "homeLayout",
  components: { ModuleAdviser, InnerModule},
  // props:['moduleName'],
  async asyncData({app}) {
    //获取当前类下的最热文章
    let res = await app.api.reqGeneralAllByCatalogue(30);
    if (res.code === 200) {
      for (let item of res.rows) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    //获取医生等列表
    let doctorRes=await app.api.reqAllDoctor();
    if(doctorRes.code===200){
      for(let doctor of doctorRes.rows){
        doctor.doctorAvatar=app.api.BASEURL+doctor.doctorAvatar
      }
    }
    // //获取当类下的子分类的文章
    // let copdRes = await app.api.reqGeneralAllByCatalogue(114);//慢阻肺
    // if (copdRes.code === 200) {
    //   for (let item of copdRes.rows) {
    //     item.publishTime = renderTime(item.publishTime);
    //   }
    // }
    // let expansionRes = await app.api.reqGeneralAllByCatalogue(115);//慢性支气管扩张症
    // if (expansionRes.code === 200) {
    //   for (let item of expansionRes.rows) {
    //     item.publishTime = renderTime(item.publishTime);
    //   }
    // }

    return {
      // catagoryList:res.rows,
      // doctorList:doctorRes.rows,
      // copdList: copdRes.rows,
      // expansionList: expansionRes.rows,
      articleList: res.rows,
      total:res.total,
      doctorList:doctorRes.rows,

    }
  },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.grid-content {
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.module-name {
  font-size: 20px;
  .icon-traditional {
    font-size: 24px;
    color: @themeColor;
  }
}
.new-champions-control-img {
  width: 80px;
  height: 80px;
  //margin-left: 20px;
  //margin-bottom: 10px;
  //margin-right: 20px;
}
.chronic-respiratory-disease-img{
  width: 454px;
  height: 235px;
  text-align: center;
  margin-top: 10px;
}
.ncc-title{
  margin-bottom: 30px;
}
.ncc-link{
  text-align: left;
  font-size: 19px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.ncc-link-right{
  text-align: center;
  font-size: 19px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.acticle-show-box {
  text-align: left;
  .article-show {
    font-size: 20px;
    border-left: 3px solid @themeColor;
    padding-left: 5px;
  }
}
</style>
